<template>
  <view v-if="visible" class="profile-guide-container">
    <!-- 遮罩层 -->
    <view class="guide-mask animate-fade" @tap="close"></view>

    <!-- 引导内容 -->
    <view class="guide-content animate-scale">
      <!-- 顶部装饰 -->
      <view class="cyber-decoration top-decoration"></view>

      <!-- 头部 -->
      <view class="guide-header">
        <text class="guide-title">完善个人资料</text>
        <text class="guide-close tn-icon-close pulse-effect" @tap="close"></text>
      </view>

      <!-- 进度指示器 -->
      <view class="guide-progress">
        <view class="progress-bar">
          <view class="progress-fill light-effect" :style="{ width: `${completionPercentage}%` }"></view>
        </view>
        <text class="progress-text">已完成 {{completionPercentage}}%</text>
      </view>

      <!-- 内容区域 -->
      <view class="guide-body">
        <!-- 资料完善的好处 -->
        <view class="guide-benefits">
          <view class="benefit-item hover-effect">
            <text class="benefit-icon tn-icon-search glow-effect"></text>
            <view class="benefit-text-container">
              <text class="benefit-text">在密友速配显示</text>
              <text class="benefit-subtext">审核通过可显示</text>
            </view>
          </view>
          <view class="benefit-item hover-effect">
            <text class="benefit-icon tn-icon-team glow-effect"></text>
            <view class="benefit-text-container">
              <text class="benefit-text">增加匹配推荐几率</text>
              <text class="benefit-subtext">解锁高级匹配功能</text>
            </view>
          </view>
          <view class="benefit-item hover-effect">
            <text class="benefit-icon tn-icon-reply glow-effect"></text>
            <view class="benefit-text-container">
              <text class="benefit-text">增加回复几率</text>
              <text class="benefit-subtext">互动率提升3倍</text>
            </view>
          </view>
        </view>

        <!-- 引导按钮 -->
        <view class="guide-actions">
          <button class="btn-primary cyber-button" @tap="showBasicProfileEditor">
            <text class="btn-icon tn-icon-edit-form"></text>
            <text class="btn-text">立即完善</text>
          </button>
          <text class="btn-skip neon-text" @tap="skipGuide">稍后再说</text>
        </view>
      </view>

      <!-- 底部装饰 -->
      <view class="cyber-decoration bottom-decoration"></view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';

export default {
  name: 'ProfileGuide',
  data() {
    return {
      // 移除localHidden状态
    }
  },
  computed: {
    ...mapState({
      isLoggedIn: state => state.user.isLogin,
      userInfo: state => state.user.userInfo
    }),
    ...mapGetters({
      profileStatus: 'user/profileStatus',
      shouldShow: 'user/shouldShowProfileGuide'
    }),
    completionPercentage() {
      return this.profileStatus.completionPercentage;
    },
    isCoreComplete() {
      return this.profileStatus.isCoreComplete;
    },
    isForced() {
      //return this.isCoreComplete === false;
	  return false;
    },
    // 优化visible计算属性，使其能够实时响应shouldShow的变化
    visible() {
      return this.shouldShow;
    }
  },
  props: {
    // 引导弹窗显示的最低资料完成度阈值，低于此值会显示引导
    threshold: {
      type: Number,
      default: 60
    }
  },
  methods: {
    ...mapActions({
      // 映射skipProfileGuide action
      storeSkipGuide: 'user/skipProfileGuide'
    }),
    ...mapMutations({
      // 映射设置引导跳过状态的mutation
      setGuideSkipped: 'user/SET_PROFILE_GUIDE_SKIPPED'
    }),

    // 显示引导 - 手动显示引导功能
    show() {
      // 重置跳过状态
      this.setGuideSkipped(false);
      // 播放音效
      this.playShowSound();
    },

    // 关闭引导
    close() {
      if (!this.isForced) {
        // 通过store设置跳过状态
        this.storeSkipGuide();
        this.$emit('close');
      }
    },

    // 显示基础资料编辑器 - 修改为页面跳转
    showBasicProfileEditor() {
      // 添加按钮点击音效
      this.playButtonSound();

      // 跳转到完善资料页面，而不是显示弹窗
      uni.navigateTo({
        url: '/pages/profile/profile-setup'
      });
      this.$emit('edit');
    },

    // 跳过引导
    skipGuide() {
      if (!this.isForced) {
        // 通过store设置跳过状态
        this.storeSkipGuide();
        this.$emit('skip');
      }
    },

    // 播放弹窗显示音效 - 可选实现
    playShowSound() {
      // 如果有音效资源，可以在这里播放
      // uni.createInnerAudioContext() 等
    },

    // 播放按钮点击音效 - 可选实现
    playButtonSound() {
      // 如果有音效资源，可以在这里播放
      // uni.createInnerAudioContext() 等
    }
  },
  mounted() {
    // 初始化时，如果应该显示，则播放音效
    this.$nextTick(() => {
      if (this.visible) {
        this.playShowSound();
      }
    });
  }
}
</script>

<style lang="scss" scoped>
.profile-guide-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 动画定义 */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }

  @keyframes glow {
    from { filter: drop-shadow(0 0 2rpx rgba(179, 247, 60, 0.6)); }
    to { filter: drop-shadow(0 0 8rpx rgba(179, 247, 60, 0.9)); }
  }

  @keyframes flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  .animate-fade {
    animation: fadeIn 0.3s ease-out;
  }

  .animate-scale {
    animation: scaleIn 0.4s cubic-bezier(0.16, 1.36, 0.45, 0.93);
  }

  .glow-effect {
    animation: glow 2s infinite alternate;
  }

  .pulse-effect {
    animation: pulse 2s infinite ease-in-out;
  }

  .guide-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
  }

  .guide-content {
    width: 85%;
    max-width: 600rpx;
    background-color: rgba(19, 20, 21, 0.95);
    border-radius: 24rpx;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.5),
                0 0 20rpx rgba(179, 247, 60, 0.2);
    border: 1rpx solid rgba(179, 247, 60, 0.3);

    /* 电竞风格装饰线 */
    .cyber-decoration {
      height: 4rpx;
      background: linear-gradient(90deg,
                  transparent 0%,
                  rgba(179, 247, 60, 0.3) 20%,
                  rgba(179, 247, 60, 1) 50%,
                  rgba(179, 247, 60, 0.3) 80%,
                  transparent 100%);
      position: relative;

      &.top-decoration {
        &:after {
          content: '';
          position: absolute;
          right: 20%;
          top: 0;
          width: 30rpx;
          height: 10rpx;
          background-color: #B3F73C;
          clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
        }
      }

      &.bottom-decoration {
        &:after {
          content: '';
          position: absolute;
          left: 20%;
          bottom: 0;
          width: 30rpx;
          height: 10rpx;
          background-color: #B3F73C;
          clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
        }
      }
    }

    .guide-header {
      padding: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 8rpx;

      /* 移除原来的实线边框 */
      border-bottom: none;

      /* 添加装饰性分隔线 */
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background: linear-gradient(90deg,
                  transparent 0%,
                  rgba(179, 247, 60, 0.05) 10%,
                  rgba(179, 247, 60, 0.2) 50%,
                  rgba(179, 247, 60, 0.05) 90%,
                  transparent 100%);
      }

      /* 添加装饰点 */
      &:before {
        content: '';
        position: absolute;
        bottom: -2rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 8rpx;
        height: 8rpx;
        background-color: #B3F73C;
        border-radius: 50%;
        box-shadow: 0 0 8rpx rgba(179, 247, 60, 0.8);
      }

      .guide-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #e0e0e0;
        text-shadow: 0 0 10rpx rgba(179, 247, 60, 0.3);
      }

      .guide-close {
        font-size: 40rpx;
        color: #B3F73C;
        line-height: 1;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        &:active {
          background-color: rgba(179, 247, 60, 0.15);
        }
      }
    }

    .guide-progress {
      padding: 20rpx 30rpx;

      .progress-bar {
        height: 10rpx;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 10rpx;
        box-shadow: inset 0 0 8rpx rgba(0, 0, 0, 0.5);

        .progress-fill {
          height: 100%;
          background: linear-gradient(90deg, #8eac21, #B3F73C, #c6ff5c);
          background-size: 200% 100%;
          animation: flow 2s linear infinite;
          border-radius: 10rpx;
          transition: width 0.8s cubic-bezier(0.12, 0.81, 0.31, 0.95);
          position: relative;

          &:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            width: 10rpx;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10rpx;
          }
        }
      }

      .progress-text {
        font-size: 24rpx;
        color: #B3F73C;
        font-weight: bold;
      }
    }

    .guide-body {
      padding: 20rpx 30rpx 40rpx;

      .guide-benefits {
        margin-bottom: 40rpx;

        .benefit-item {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          padding: 15rpx;
          border-radius: 16rpx;
          background-color: rgba(179, 247, 60, 0.05);
          transition: all 0.3s ease;
          transform-origin: left center;

          &:hover, &:active {
            transform: translateX(5rpx) scale(1.02);
            background-color: rgba(179, 247, 60, 0.1);
          }

          .benefit-icon {
            font-size: 40rpx;
            margin-right: 20rpx;
            color: #B3F73C;
            background: linear-gradient(45deg, rgba(19, 20, 21, 0.7), rgba(19, 20, 21, 0.3));
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(179, 247, 60, 0.5);
            box-shadow: 0 0 10rpx rgba(179, 247, 60, 0.2);
            flex-shrink: 0;
          }

          .benefit-text-container {
            display: flex;
            flex-direction: column;

            .benefit-text {
              font-size: 28rpx;
              color: #e0e0e0;
              font-weight: bold;
              margin-bottom: 4rpx;
            }

            .benefit-subtext {
              font-size: 22rpx;
              color: #B3F73C;
              opacity: 0.8;
            }
          }
        }
      }

      .guide-actions {
        display: flex;
        flex-direction: column;
        align-items: center;

        .btn-primary {
          width: 100%;
          height: 88rpx;
          background: linear-gradient(90deg, #8eac21, #B3F73C);
          color: #020303;
          font-size: 30rpx;
          font-weight: bold;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20rpx;
          border: none;
          position: relative;
          overflow: hidden;
          box-shadow: 0 0 15rpx rgba(179, 247, 60, 0.3);
          clip-path: polygon(10rpx 0, 100% 0, calc(100% - 10rpx) 100%, 0 100%);

          &:active {
            transform: translateY(2rpx);
            box-shadow: 0 0 8rpx rgba(179, 247, 60, 0.2);
          }

          &:after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
            animation: shine 3s infinite linear;
          }

          @keyframes shine {
            0% { transform: rotate(45deg) translateX(-100%); }
            100% { transform: rotate(45deg) translateX(100%); }
          }

          .btn-icon {
            margin-right: 8rpx;
          }
        }

        .btn-skip {
          font-size: 26rpx;
          color: rgba(255, 255, 255, 0.6);
          padding: 10rpx 20rpx;
          transition: all 0.3s ease;
          margin-top: 10rpx;

          &:active {
            color: #B3F73C;
            text-shadow: 0 0 8rpx rgba(179, 247, 60, 0.4);
          }
        }

        .neon-text {
          &:hover {
            color: #B3F73C;
            text-shadow: 0 0 5rpx rgba(179, 247, 60, 0.5);
          }
        }
      }
    }
  }
}
</style>
